<form nz-form [formGroup]="validateForm">
  <div class="form-inner">

    <nz-form-item nzFlex>
      <nz-form-label nzRequired class="label-width">资源组</nz-form-label>
      <nz-form-control class="flex-1">
        <input nz-input formControlName="resourceGroup" placeholder="请输入资源组名称">
        <nz-form-explain *ngIf="hasError('resourceGroup')">资源组名称长度为2-50个字符!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label nzRequired class="label-width">HTTP方法</nz-form-label>
      <nz-form-control class="flex-1">
        <nz-select formControlName="method" nzPlaceHolder="请选择HTTP方法">
          <nz-option nzLabel="GET" nzValue="GET"></nz-option>
          <nz-option nzLabel="POST" nzValue="POST"></nz-option>
          <nz-option nzLabel="PUT" nzValue="PUT"></nz-option>
          <nz-option nzLabel="DELETE" nzValue="DELETE"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="hasError('method')">HTTP方法不可为空!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label nzRequired class="label-width">资源地址</nz-form-label>
      <nz-form-control class="flex-1">
        <input nz-input formControlName="uri" placeholder="请输入资源地址">
        <nz-form-explain *ngIf="hasError('uri')">资源地址不可为空!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label nzRequired class="label-width">操作</nz-form-label>
      <nz-form-control class="flex-1">
        <input nz-input formControlName="operation" placeholder="请输入操作描述">
        <nz-form-explain *ngIf="hasError('operation')">操作描述不能为空!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label class="label-width">描述</nz-form-label>
      <nz-form-control class="flex-1">
        <input nz-input formControlName="description" placeholder="请输入描述">
      </nz-form-control>
    </nz-form-item>

  </div>
</form>